<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts/core'
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import resizeEcharts from '@/utils/resizeEcharts'

echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer])
require('echarts/theme/macarons') // echarts theme

export default {
  mixins: [resizeEcharts],
  props: {
    className: {
      type: String,
      default: 'myChart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      default: () => ({})
      // required: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.myChart) {
      return
    }
    this.myChart.dispose()
    this.myChart = null
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$el, 'macarons')
      // this.setOptions(this.chartData)
      this.setOptions()
      // window.addEventListener('resize', () => {
      //   this.myChart.resize()
      // })
    },
    setOptions({ expectedData, actualData } = {}) {
      this.myChart.setOption({
        title: {
          text: '年度留证量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          fontsize: 20
        },
        yAxis: {
          type: 'value'
        },
        grid: {
        left: '3%',
        right: '2%',
        bottom: '3%',
        containLabel: true
    },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        series: [{
          data: [120, 300, 150, 80, 70, 110],
          type: 'bar',
          barWidth: 30,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    }
  }
}
</script>
